<template>
    <div class="body">
        <div>
            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                <el-radio-button :value="false">expand</el-radio-button>
                <el-radio-button :value="true">collapse</el-radio-button>
            </el-radio-group>
            <el-menu default-active="1" class="el-menu-vertical-demo my_menu" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
                <!-- <el-sub-menu index="1">
                    <template #title>
                        <el-icon><location /></el-icon>
                        <span>Navigator One</span>
                    </template>
                    <el-menu-item-group>
                        <template #title><span>Group One</span></template>
                        <el-menu-item index="1-1">item one</el-menu-item>
                        <el-menu-item index="1-2">item two</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="Group Two">
                        <el-menu-item index="1-3">item three</el-menu-item>
                    </el-menu-item-group>
                    <el-sub-menu index="1-4">
                        <template #title><span>item four</span></template>
                        <el-menu-item index="1-4-1">item one</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
                <el-menu-item index="15">
                    <el-icon><setting /></el-icon>
                    <template #title>Navigator Four</template>
                </el-menu-item> -->
                <el-menu-item index="2">
                    <el-icon><UploadFilled /></el-icon>
                    <template #title>
                        <RouterLink to="/upload" class="link">上传文件</RouterLink>
                    </template>
                </el-menu-item>
                <el-menu-item index="3">
                    <el-icon><files /></el-icon>
                    <template #title><RouterLink to="/showFileRecord" class="link">查看文件上传记录</RouterLink></template>
                </el-menu-item>
                <el-menu-item index="4">
                    <el-icon><Goods /></el-icon>
                    <template #title><RouterLink to="/showConsumptionRecord" class="link">查看消费记录</RouterLink></template>
                </el-menu-item>
                <el-menu-item index="5">
                    <el-icon><TrendCharts /></el-icon>
                    <template #title><RouterLink to="/dataAnalysis" class="link">数据分析</RouterLink></template>
                </el-menu-item>
                <el-menu-item index="6">
                    <el-icon><Collection /></el-icon>
                    <template #title><RouterLink to="/assetsStatistics" class="link">固资统计</RouterLink></template>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="routerShow">
            <RouterView />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Document, Menu as IconMenu, Location, Setting } from "@element-plus/icons-vue";
import { RouterLink } from "vue-router";

const isCollapse = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
}
.my_menu {
    height: 90vh;
}
.body {
    width: 100%;
    display: flex;

    .routerShow{
        width: calc(100% - 200px);
    }
}

.link {
    text-decoration: none;
    color: black;
}
</style>
